<template>
  <v-card
    class="driver-student-card"
    :class="statusClass"
    variant="flat"
    elevation="0"
  >
    <v-card-text class="pa-3">
      <div class="d-flex align-center mb-2">
        <v-avatar :color="avatarColor" size="40" class="me-3">
          <span class="text-white font-weight-bold">{{ student.student_name?.charAt(0) || '?' }}</span>
        </v-avatar>
        
        <div class="flex-grow-1">
          <h4 class="text-subtitle-1 font-weight-bold mb-0">{{ student.student_name }}</h4>
          <p class="text-caption text-medium-emphasis mb-0">{{ student.student_no }}</p>
          <v-chip size="x-small" color="blue" variant="tonal" class="mt-1">
            {{ student.class_name }}
          </v-chip>
        </div>
      </div>
      
      <!-- 状态信息 -->
      <div class="status-section mb-3">
        <div class="d-flex align-center">
          <v-icon size="16" class="me-2">mdi-school</v-icon>
          <v-chip
            :color="getArrivalStatusColor(student.arrival_status)"
            size="small"
            variant="elevated"
          >
            {{ getArrivalStatusText(student.arrival_status) }}
          </v-chip>
        </div>
      </div>
      
      <!-- 时间信息 -->
      <div v-if="student.arrival_time" class="d-flex align-center mb-2">
        <v-icon size="16" class="me-2 text-medium-emphasis">mdi-clock</v-icon>
        <span class="text-caption">到校时间: {{ formatTime(student.arrival_time) }}</span>
      </div>
      
      <!-- 操作按钮 -->
      <div v-if="showActions" class="actions-section mt-3">
        <v-btn
          v-if="!student.arrival_confirmed"
          color="primary"
          size="small"
          prepend-icon="mdi-school"
          @click="$emit('mark-arrived', student)"
          :loading="student.loading"
          block
        >
          确认到校
        </v-btn>
        <v-chip v-else color="success" size="small" class="w-100 justify-center">
          已到校
        </v-chip>
      </div>
    </v-card-text>
    
    <!-- 状态指示器 -->
    <div class="status-indicator" :class="statusIndicatorClass"></div>
  </v-card>
</template>

<script setup>
import { computed } from 'vue'

// 组件属性定义
const props = defineProps({
  student: {
    type: Object,
    required: true
  },
  showActions: {
    type: Boolean,
    default: true
  }
})

// 事件定义
const emit = defineEmits(['mark-arrived'])

// 计算属性
const avatarColor = computed(() => {
  return props.student.arrival_confirmed ? 'success' : 'primary'
})

const statusClass = computed(() => {
  return props.student.arrival_confirmed ? 'card-completed' : 'card-pending'
})

const statusIndicatorClass = computed(() => {
  return props.student.arrival_confirmed ? 'indicator-success' : 'indicator-pending'
})

// 状态相关方法
const getArrivalStatusColor = (confirmed) => {
  return confirmed ? 'success' : 'grey'
}

const getArrivalStatusText = (confirmed) => {
  return confirmed ? '已到校' : '未到校'
}

// 时间格式化方法
const formatTime = (timeString) => {
  if (!timeString) return '--'
  try {
    const date = new Date(timeString)
    return date.toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit'
    })
  } catch (error) {
    return '--'
  }
}
</script>

<style scoped>
.driver-student-card {
  position: relative;
  transition: all 0.3s ease;
  border: none !important;
  border-radius: 12px;
}

.driver-student-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* 卡片状态样式 */
.card-pending {
  background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
  color: #424242;
}

.card-completed {
  background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
  color: #2e7d32;
}

/* 状态指示器 */
.status-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.indicator-pending {
  background-color: #9E9E9E;
}

.indicator-success {
  background-color: #4CAF50;
}

.status-section {
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  padding: 8px;
}

.actions-section {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 12px;
}
</style>